<template>
  <div ref="editorContainer" class="editor-container"></div>
</template>
<script setup>
    import { ref, onMounted, watch, nextTick } from 'vue'
    import WangEditor from 'wangeditor'

    const props = defineProps({
        modelValue: { type: String, default: '' },
    })
    const emit = defineEmits(['update:modelValue'])
    const editorContainer = ref(null)
    let editor = null
    onMounted(async () => {
        await nextTick()
        editor = new WangEditor(editorContainer.value)
        editor.config.onChange = (html) => emit('update:modelValue', html)
        editor.create()
        editor.txt.html(props.modelValue)
    })
    watch(() => props.modelValue, (val) => {
        if (editor && val !== editor.txt.html()) editor.txt.html(val)
    })
</script>
<style>
    .editor-container {
        min-height: 200px;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 4px;
    }
</style>